import { FC, useEffect, useState } from "react";
import { Typography, Spin } from "antd";
const { Title } = Typography;
import { getChartStatServices } from "@/services/stat";
import { useParams } from "react-router-dom";
import { useRequest } from "ahooks";
import { getComponentConfByType } from "@/components/QuestionComponents";

type PropsType = {
  selectedComponentId: string;
  selectedComponentType: string;
};

const ChartStat: FC<PropsType> = ({
  selectedComponentId,
  selectedComponentType,
}) => {
  const { id = "" } = useParams();
  const [chartData, setChartData] = useState([]);
  const { loading, run } = useRequest(
    async () => {
      const res = await getChartStatServices(id, selectedComponentId);
      return res;
    },
    {
      manual: true,
      onSuccess: (res) => {
        console.log(res);
        setChartData(res.stat);
      },
    }
  );

  useEffect(() => {
    if (id && selectedComponentId) {
      run();
    }
  }, [selectedComponentId, run, id]);

  const componentConf = getComponentConfByType(selectedComponentType);

  if (!selectedComponentId) return <div>未选择组件</div>;
  if (!componentConf?.ChartComponent) return <div>该组件没有图表展示</div>;

  return (
    <div>
      <Title level={4}>图表统计</Title>
      {loading && <Spin />}
      {!loading && (
        <div id="chart">
          <componentConf.ChartComponent stat={chartData} />
        </div>
      )}
    </div>
  );
};

export default ChartStat;
